<template>
	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-white" :isBack="true" fatherCss="box-shadow:none">
			<block slot="backText"></block>
			<block slot="content">确认兑换</block>
		</cu-custom>
		<view class="head" v-if="!productId">
			<view class="shops">
				<image :src="shopInfo.b_image" mode=""></image>
				<view class="text-cut">
					{{shopInfo.b_name}}
				</view>
			</view>
			<view class="good">
				<image :src="shopInfo.product_image" mode=""></image>
				<view class="">
					<text>{{shopInfo.product_name}}</text>
					<text>×1</text>
				</view>
			</view>
		</view>

		<view class="text-address">
			<view class="text-title">
				<text></text>
				<text>填写收货地址</text>
			</view>
			<view class="add-content">
				<view class="input-item">
					<view class="input-title">
						收货人
					</view>
					<view class="input-c">
						<input type="text" v-model="name" maxlength="6" placeholder="请输入收货人名称" placeholder-class="place-holder" />
					</view>
				</view>
				<view class="input-item">
					<view class="input-title">
						手机号码
					</view>
					<view class="input-c">
						<input type="number" v-model="phone" maxlength="11" placeholder="请输入手机号码" placeholder-class="place-holder" />
					</view>
				</view>
				<view class="input-item">
					<view class="input-title">
						所在地区
					</view>
					<view class="input-c truth-add" @click="openPicker">
						<view :style="region=='请勾选收货地址'?'color: #666':'color: #333'">{{region}}</view>
						<tui-icon :name="'arrowright'" :size="'20'" :color="'#666'"></tui-icon>
					</view>
				</view>
				<view class="input-item">
					<view class="input-title">
						详细地址
					</view>
					<view class="input-c">
						<textarea v-model="detailAdd" placeholder="详细地址:如道路、门牌、小区、楼栋号、单元室等" placeholder-class="place-holder" /></textarea>
					</view>
				</view>
			</view>
		</view>
		<lotus-address v-on:choseVal="choseValue" v-if="addShow" :iphoneX="iphoneX" :lotusAddressData="lotusAddressData" :lotusAddressJson="lotusAddressJson"></lotus-address>
		<view class="use-btn">
			<view class="" v-if="!productId">
				共1件
			</view>
			<view class="" v-if="productId">

			</view>
			<view class="btn" @click="productId?gocoin():submit()">
				立即兑换
			</view>
		</view>
	</view>
</template>

<script>
	import tuiIcon from "@/components/thorUI/icon.vue";
	import lotusAddress from "@/components/Provinces-truth/Winglau14-lotusAddress.vue";
	export default {
		components: {
			tuiIcon,
			lotusAddress
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				region: '请勾选收货地址',
				regionCode: '',
				phone: '',
				name: '',
				detailAdd: '',
				lotusAddressData: {
					visible: false,
					provinceName: '',
					cityName: '',
					townName: '',
				},
				orderId: '',
				shopInfo: {},
				iphoneX: false,
				productId: '',
				lotusAddressJson:[],
				addShow: false
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		},
		onLoad(options) {
			var that = this
			this.orderId = options.orderId
			if (options.productId) {
				this.productId = options.productId
			}
			this.getInfo()
			this.getJson()
			uni.getSystemInfo({
				success(res) {
					if (res.model.indexOf('iPhone X') > -1) {
						that.iphoneX = true
					}
				}
			})
		},
		methods: {
			getJson() {
				var that = this;
				// #ifdef !H5
				this.$request({
					url: '/static/admin/js/address.json',
					success: res => {
						that.lotusAddressJson = res.data
						that.addShow = true
					},
					fail: () => {},
					complete: () => {}
				});
				// #endif                                                                                
				// #ifdef H5
				uni.request({
					url: 'http://zsgzh.miandanshidai.com/Winglau14-lotusAddress.json',
					success: res => {
						that.lotusAddressJson = res.data
					},
					fail: () => {},
					complete: () => {}
				})
				// #endif
			},
			//打开picker
			openPicker() {
				this.lotusAddressData.visible = true;
				if (this.lotusAddressData.provinceName && this.lotusAddressData.cityName && this.lotusAddressData.townName) {

				} else {
					this.lotusAddressData.provinceName = '北京市';
					this.lotusAddressData.cityName = '北京市';
					this.lotusAddressData.townName = '东城区';
				}
			},
			//回传已选的省市区的值
			choseValue(res) {
				this.lotusAddressData.visible = res.visible; //visible为显示与关闭组件标识true显示false隐藏
				//res.isChose = 1省市区已选 res.isChose = 0;未选
				if (res.isChose) {
					this.lotusAddressData.provinceName = res.province; //省
					this.lotusAddressData.cityName = res.city; //市
					this.lotusAddressData.townName = res.town; //区
					this.region = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
					this.regionCode = `${res.provinceCode} ${res.cityCode} ${res.townCode}`; //region为已选的省市区的值
				}
			},
			gocoin() {
				var that = this;
				var name = this.name;
				var phone = this.phone;
				var region = this.region;
				var regionCode = this.regionCode;
				var detailAdd = this.detailAdd;
				var isDefault = this.isDefault
				if (name == '') {
					this.uniShowToast('请填写收货人姓名')
					return false
				}

				if (phone == '') {
					this.uniShowToast('请填写收货人手机号码')
					return false
				} else if (!(/^1[3456789]\d{9}$/.test(phone))) {
					this.uniShowToast('手机号码格式有误')
					return false
				}

				if (region == '请勾选收货地址') {
					this.uniShowToast('请勾选收货地址')
					return false
				}

				if (detailAdd == '') {
					this.uniShowToast('请填写详细地址')
					return false
				}

				if (detailAdd == '') {
					this.uniShowToast('请填写详细地址')
					return false
				}

				// 提交
				this.$request({
					url: '/HelpOrder/draw_order',
					method: 'post',
					data: {
						order_id: that.orderId,
						good_id: that.productId,
						real_name: name,
						user_phone: phone,
						user_address: detailAdd,
						areas: region,
					},
					success: res => {
						if (res.data.status == 1) {
							uni.showModal({
								content: '兑换成功,我们会尽快联系你的，请静候~(仅限围场县城内)',
								showCancel: false,
								success() {
									uni.navigateBack({
										delta: 1
									});
									uni.setStorageSync('changeGoodId', that.shopInfo.id)
								}
							})
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});

			},
			// 提交数据
			submit() {
				var that = this;
				var name = this.name;
				var phone = this.phone;
				var region = this.region;
				var regionCode = this.regionCode;
				var detailAdd = this.detailAdd;
				var isDefault = this.isDefault
				if (name == '') {
					this.uniShowToast('请填写收货人姓名')
					return false
				}

				if (phone == '') {
					this.uniShowToast('请填写收货人手机号码')
					return false
				} else if (!(/^1[3456789]\d{9}$/.test(phone))) {
					this.uniShowToast('手机号码格式有误')
					return false
				}

				if (region == '请勾选收货地址') {
					this.uniShowToast('请勾选收货地址')
					return false
				}

				if (detailAdd == '') {
					this.uniShowToast('请填写详细地址')
					return false
				}

				if (detailAdd == '') {
					this.uniShowToast('请填写详细地址')
					return false
				}

				// 提交
				this.$request({
					url: '/HelpOrder/confirm_order',
					method: 'post',
					data: {
						id: that.shopInfo.id,
						real_name: name,
						user_phone: phone,
						user_address: detailAdd,
						areas: region,
					},
					success: res => {
						if (res.data.status == 1) {
							uni.showToast({
								title: '兑换成功'
							})
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								});
								uni.setStorageSync('changeGoodId', that.shopInfo.id)
							}.bind(that), 1000);
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});

			},
			getInfo() {
				var that = this
				this.$request({
					url: '/HelpOrder/get_order_detail',
					data: {
						order_id: that.orderId
					},
					success: res => {
						if (res.data.status == 1) {
							that.shopInfo = res.data.data
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			uniShowToast(text) {
				uni.showToast({
					title: text,
					icon: 'none'
				})
			}
		}
	}
</script>


<style scoped>
	.head {
		width: 100%;
		height: 280rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		padding: 0 24rpx 100rpx;
		box-sizing: border-box;
	}

	.head .shops {
		width: 100%;
		display: flex;
		height: 44rpx;
		box-sizing: border-box;
	}

	.head .shops image {
		width: 44rpx;
		height: 44rpx;
		margin-right: 12rpx;
	}

	.head .shops view {
		flex: 1;
		line-height: 44rpx;
	}

	.head .good {
		flex: 1;
		padding: 23rpx 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.head .good image {
		width: 200rpx;
		height: 188rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.head .good>view {
		flex: 1;
		display: flex;
		height: 188rpx;
		flex-direction: column;
		justify-content: space-between;
	}

	.head .good>view>text:nth-child(1) {
		font-size: 30rpx;
		line-height: 36rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.head .good>view>text:nth-child(2) {
		font-size: 24rpx;
		line-height: 36rpx;
		letter-spacing: 1rpx;
		color: #333333;
		text-align: right;
	}

	.text-address {
		width: 100%;
		background: #fff;
		flex-direction: column;
		display: flex;
		padding: 0 24rpx;
		margin-top: 30rpx;
	}

	.text-address .text-title {
		padding: 24rpx 0;
		width: 100%;
		display: flex;
		align-items: center;
	}

	.text-address .text-title>text {
		display: block;
	}

	.text-address .text-title>text:nth-child(1) {
		width: 6rpx;
		height: 30rpx;
		background-color: #f34930;
		margin-right: 10rpx;
	}

	.text-address .text-title>text:nth-child(2) {
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
		font-weight: bold;
	}

	.add-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		background: #fff;
	}

	.truth-add {
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
	}

	.truth-add view {
		/* text-align: right; */
		/* flex: 1; */
		font-size: 30rpx;
	}

	.input-item {
		width: 100%;
		display: flex;
		flex-direction: column;
		border-bottom: solid 1rpx #efefef;
		box-sizing: border-box;
		padding: 10rpx 0;
	}

	.input-item .input-title {
		width: 200rpx;
		font-size: 32rpx;
		color: #333;
		line-height: 66rpx;
	}

	.input-item .input-c {
		flex: 1;
		font-size: 30rpx;
		color: #333333;
	}

	textarea {
		width: 100%;
		padding: 10rpx 0;
		box-sizing: border-box;
		height: 150rpx;
		font-size: 28rpx;
		color: #333;
	}

	.is-default {
		width: 100%;
		margin-top: 30rpx;
		background: #fff;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.is-default .input-item {
		border: none
	}

	.swich-tab {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.submmit {
		width: 702rpx;
		height: 98rpx;
		border-radius: 8rpx;
		font-size: 36rpx;
		text-align: center;
		line-height: 98rpx;
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		margin-left: -351rpx;
		font-weight: 400;
	}

	.use-btn {
		width: 100%;
		height: 98rpx;
		background: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
	}

	.use-btn>view:nth-child(1) {
		flex: 1;
		text-align: right;
		color: #666666;
		font-size: 28rpx;
		padding-right: 20rpx;

	}

	.use-btn .btn {
		text-align: center;
		width: 250rpx;
		height: 98rpx;
		background-color: #f34930;
		line-height: 98rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;

	}
</style>
<style>
	.place-holder {
		color: #666;
		font-size: 30rpx;
	}

	page {
		background: #f5f5f5;
	}
</style>
